<template>
  <el-dialog
    title="添加关注热门推荐"
    :visible.sync="addDialogData.isShow"
    width="900px"
    @close="closeAddDialog"
  >
    <!-- 顶部搜索框部分 -->
    <div id="topSearch">
      <div class="search-box">
        <el-form
          ref="ruleForm"
          :inline="true"
          :model="formInline"
          :rules="rules"
          class="demo-form-inline"
        >
          <el-form-item label="查询类型" prop="type">
            <el-select v-model="formInline.type" placeholder="">
              <el-option
                v-for="item in searchTypeList"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- 输入搜索部分 -->
          <el-form-item label="查询:" prop="value">
            <el-input
              v-model="formInline.value"
              placeholder="手机号/用户名/QQ/大鹏号搜索"
              size="small"
              class="numberInput"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item class="s-btn">
            <el-button
              type="success"
              icon="el-icon-search"
              @click="toSearch('ruleForm')"
            >
              查询
            </el-button>
            <el-button type="success" plain @click="reset">
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <freshCom @searchList="searchList"></freshCom>
    <!-- 表格部分 -->
    <el-table
      v-loading="loading"
      :data="tableData"
      style="width: 100%"
      @selection-change="selectChange"
    >
      <el-table-column
        type="selection"
        :selectable="checkSelectable"
        width="55"
        align="center"
      ></el-table-column>
      <el-table-column type="index" width="60" align="center" label="序号">
        <template slot-scope="scope">
          {{
            scope.$index
              | filterPage(searchParams.pageNum, searchParams.pageSize)
          }}
        </template>
      </el-table-column>
      <el-table-column prop="avatar" label="头像">
        <template slot-scope="scope">
          <el-avatar :src="scope.row.avatar"></el-avatar>
        </template>
      </el-table-column>
      <el-table-column prop="loginName" label="用户名"></el-table-column>
      <el-table-column prop="nickname" label="昵称"></el-table-column>
      <el-table-column label="手机号">
        <template slot-scope="scope">
          <div v-if="scope.row.mobile">
            {{ scope.row.mobile }}
          </div>
          <div v-else>
            -
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="spare4" label="大鹏号"></el-table-column>
      <el-table-column label="微信号">
        <template slot-scope="scope">
          <div v-if="scope.row.weixinAccount">
            {{ scope.row.weixinAccount }}
          </div>
          <div v-else>
            -
          </div>
        </template>
      </el-table-column>
      <el-table-column label="QQ号">
        <template slot-scope="scope">
          <div v-if="scope.row.qqAccount">
            {{ scope.row.qqAccount }}
          </div>
          <div v-else>
            -
          </div>
        </template>
      </el-table-column>
      <el-table-column label="是否已添加">
        <template slot-scope="scope">
          <div v-if="scope.row.being">
            是
          </div>
          <div v-else>
            否
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-全局组件-->
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>
    <span slot="footer" class="dialog-footer">
      <el-button type="success" plain @click="addDialogData.isShow = false"
        >取 消</el-button
      >
      <el-button type="success" :loading="loading" @click="addConfirm"
        >确定</el-button
      >
    </span>
  </el-dialog>
</template>
<script>
import { sysNormalDisable } from '@utils/dictionariesFunc'
import { getAddList, addPosts } from '@/api/hotManagement/hotManageAPI' // 接口
export default {
  props: ['addDialogData'],
  data() {
    return {
      loading: false,
      total: 0,
      tableData: [], // table内容
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      formInline: {
        type: '',
        value: ''
      },
      rules: {
        type: {},
        value: {}
      },
      // 查询类型列表
      searchTypeList: [],
      // 选择框选中的数据
      selectData: []
    }
  },
  mounted() {
    this.getStickList()
    this.searchList()
  },
  methods: {
    /* 获取置顶类别 */
    async getStickList() {
      this.searchTypeList = await sysNormalDisable('sys_user_search_type')
      this.searchTypeList.splice(3, 2)
      //设置默认数据
      this.setDefaultValue()
      //触发获取列表
      this.$emit('toSearch')
    },
    /*设置默认数据*/
    setDefaultValue() {
      this.formInline.type = this.searchTypeList[0].dictValue
    },
    /* 获取列表 */
    searchList() {
      this.loading = true
      let obj = Object.assign({}, this.formInline, this.searchParams)
      getAddList(
        obj,
        (response) => {
          this.loading = false
          this.tableData = response.rows
          this.total = response.total
        },
        (response) => {
          this.loading = false
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    // 搜索
    toSearch() {
      this.searchParams.pageNum = 1
      this.searchList()
    },
    // 重置
    reset() {
      this.$refs['ruleForm'].resetFields()
      //设置默认数据
      this.setDefaultValue()
    },
    // 表格选择框选择
    selectChange(value) {
      this.selectData = value
    },
    // 确认新增
    addConfirm() {
      if (this.selectData.length === 0) {
        this.$alert('请至少选择一条记录', '提示', {
          confirmButtonText: '确定'
        })
      } else {
        this.$confirm(
          `确认要选中的${this.selectData.length}用户吗`,
          '系统提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).then(() => {
          this.loading = true
          let obj = [...this.selectData]
          addPosts(
            obj,
            (response) => {
              this.loading = false
              this.$emit('refresh')
              this.addDialogData.isShow = false
            },
            (response) => {
              this.loading = false
              this.$message({
                message: '新增失败',
                type: 'warning'
              })
            }
          )
        })
      }
    },
    // 弹窗关闭事件
    closeAddDialog() {
      this.loading = false
      // 清除搜索框内容
      this.formInline.value = ''
      // 清除选择框选中状态
      // this.$refs.tableRef.clearSelection()
      // 清空选中的数据
      this.selectData = []
    },
    // 控制表格选择框是否可以选择
    checkSelectable(row, index) {
      return row.being !== true
    },
    /* 换页 */
    changePage(page) {
      this.searchParams.pageNum = page
      this.searchList()
    }
  }
}
</script>
<style lang="less" scoped>
.el-form {
  margin-left: 5px;
}
.el-table {
  margin-top: 20px;
}
</style>
